<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #progress {
        width: 400px;
        height: 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: 10px 0px;
        overflow: hidden;
    }
    /* 初始状态设置进度条宽度为0px */
    #progress > div {
        width: 0px;
        height: 100%;
        background-color: yellowgreen;
        transition: all .3s ease;
    }
</style>
<body>
<div class="demo">
    <div id="uploadfile">
        <!--用来存放文件信息-->
        <div id="the_2655" class="uploader-list"></div>
        <div class="form-group form-inline">
            <div id="pick_2655" style="float:left;padding:2px 0;">选择文件</div>
            <div id="progress">
                <div></div>
            </div>
            <button id="Btn_2655" class="btn btn-default" style="padding: 5px 10px;border-radius: 3px;">开始上传</button>
        </div>
    </div>
</div>

<script>
    //上传文件函数
    //ids唯一ID
    //folder文件保存目录
    function uploadfiles(ids,folder) {
        $(function(){
            var $list = $("#the_"+ids);
            $btn = $("#Btn_"+ids);
            var uploader = WebUploader.create({
                resize: false, // 不压缩image
                swf: '__INDEX__/web/js/Uploader.swf', // swf文件路径
                server: '{:url("admin/video/uploadFile")}', // 文件接收服务端。
                pick: "#pick_"+ids, // 选择文件的按钮。可选
                chunked: true, //是否要分片处理大文件上传
                chunkSize: 5*1024*1024, //分片上传，每片2M，默认是5M
                //fileSizeLimit: 6*1024* 1024 * 1024,    // 所有文件总大小限制 6G
                fileSingleSizeLimit: 4*1024* 1024 * 1024,    // 单个文件大小限制 4 G
                formData: {
                    folder:folder  //自定义参数
                },
                //auto: false //选择文件后是否自动上传
                chunkRetry : 2, //如果某个分片由于网络问题出错，允许自动重传次数
                //runtimeOrder: 'html5,flash',
                // accept: {
                //   title: 'Images',
                //   extensions: 'gif,jpg,jpeg,bmp,png',
                //   mimeTypes: 'image/*'
                // }
            });
            // 当有文件被添加进队列的时候
            uploader.on( 'fileQueued', function( file ) {
                $("#pick_2655").css('display','none');
                $list.append( '<div id="' + file.id + '" class="item">' +
                    '<span class="info">' + file.name + '</span>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id );
                $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中'+(percentage*100).toFixed(2)+ '%');
                $("#progress div").css('width', (percentage*100).toFixed(2) + '%' );

            });
            // 文件上传成功
            uploader.on( 'uploadSuccess', function( file,response) {

                $( '#'+file.id ).find('p.state').text('已上传');
                $list.append('<input type="hidden" name="'+ids+'" value="'+response.filePath+'" />');

                $("#up_movie").val(response.filePath);
                layer.msg("上传成功",{icon:1,time:500});
                console.log(response);
                //alert(response.filePath);
            });

            // 文件上传失败，显示上传出错
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
                layer.msg("上传出错",{icon:2,time:500});
            });
            // 完成上传完
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
//                    layer.msg("上传完",{icon:1,time:500});
            });

            $btn.on('click', function () {
                if ($(this).hasClass('disabled')) {
                    return false;
                }
                uploader.upload();
            });
        });
    }
    uploadfiles(2655,"files");
</script>
</body>
</html>